<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能办公系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">


    <!--    <link rel="stylesheet" th:href="${pc} + '/static/css/index.css'" />-->


    <style type="text/css">
        pre {
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }

        code {
            font-family: Consolas, monospace;
        }


        /* 自定义加载内容样式，让图标和文字在同一行 */
        .el-loading-mask .el-loading-spinner {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .el-loading-mask .el-loading-spinner .el-icon-loading {
            margin-right: 8px; /* 图标和文字之间的间距 */
        }

        .el-button {
            height: 40px;
            line-height: 40px;
        }

    </style>

    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- 引入 ElementUI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <!-- 引入 Moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <!-- 引入 Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>


</head>
<body>
    <div id="app">
        <el-container>
            <!-- 添加侧边栏 -->
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <div class="logo" :class="{'logo-collapse': isCollapse}">
                    <i class="el-icon-eleme"></i>
                    <span style="padding-left: 6px;" v-show="!isCollapse">{{systemTitle}}</span>
                </div>
                <el-menu
                    background-color="transparent"
                    text-color="#fff"
                    active-text-color="#00ffff"
                    :default-active="activeMenu"
                    :default-openeds="[]"
                    class="el-menu-vertical"
                    :collapse="isCollapse"
                    :collapse-transition="false">

                    <el-menu-item index="1">
                        <i class="el-icon-s-home"></i>
                        <span @click="goHomePage" slot="title">首页</span>
                    </el-menu-item>

                    <el-submenu v-for="item in menuList" :index="item.flag">
                        <template slot="title">
                            <i :class="'el-icon-' + item.icon"></i>
                            <span>{{item.name}}</span>
                        </template>
                        <el-menu-item v-for="child in item.sub" :index="child.flag">
                            <i :class="'el-icon-' + child.icon"></i>
                            <span @click="openUrl(item, child)">{{child.name}}</span>
                        </el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-aside>

            <el-container>
                <!-- 添加顶部导航 -->
                <el-header>
                    <div class="header-left">
                        <i class="el-icon-s-fold" @click="toggleCollapse"></i>
                    </div>
                    <div class="header-right">
                        <!-- 消息通知 -->
                        <div class="message-badge" @click="showMessages">
                            <el-badge :value="3" class="message-icon">
                                <i class="el-icon-bell"></i>
                            </el-badge>
                        </div>
                        <!-- 用户信息 -->
                        <div class="user-info">
                            <el-dropdown trigger="click">
                                <span class="user-dropdown">
                                    <i class="el-icon-user-solid"></i>
                                    superAdmin
                                    <i class="el-icon-caret-bottom"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <i class="el-icon-s-custom"></i> 个人中心
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <i class="el-icon-setting"></i> 系统设置
                                    </el-dropdown-item>
                                    <el-dropdown-item >
                                        <span @click="logOutPage">
                                                <i class="el-icon-switch-button"></i> 退出登录
                                        </span>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                </el-header>

                <!-- 主要内容区域 -->
                <el-main>
                    <div class="container">

                        <div>
                            <el-input :width="300" v-model="inputText" placeholder="输入问题" clearable></el-input>
                            <el-button  v-loading="vload"
                                        element-loading-text="思考中......"
                                        element-loading-spinner="el-icon-loading"
                                        element-loading-background="rgba(0, 0, 0, 0.8)"
                                        style="margin-top:20px;margin-bottom:20px;"
                                        @click="sendRequest">{{ vload ? '思考中......' : '发送请求'}}</el-button>

                            <div
                                  class="result-container"
                                  v-html="resultHtml"
                            ></div>
                        </div>

                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <!-- 引入 marked 库用于渲染 Markdown -->

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <!-- 引入 highlight.js 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
    <!-- 引入 highlight.js 的 JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <!-- 自动检测代码语言 -->
    <script>hljs.highlightAll();</script>
    <script>
        function bombb() {
            const codeElements = document.querySelectorAll('code[class*="language-"]');
            codeElements.forEach(function (codeElement) {
                const text = codeElement.textContent;
                const lines = text.split('\n');
                const coloredLines = [];
                for (let line of lines) {
                    // 提取行首的缩进
                    const indentMatch = line.match(/^(\s+)/);
                    const indent = indentMatch? indentMatch[0] : '';
                    const content = line.replace(/^\s+/, '');
                    const words = content.split(/\s+/);
                    const coloredWords = words.map(function (word) {
                        const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
                        // 处理转义字符
                        const escapedWord = word.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                        return `<span style="color: ${randomColor}">${escapedWord}</span>`;
                    });
                    coloredLines.push(indent + coloredWords.join(' '));
                }
                codeElement.innerHTML = coloredLines.join('\n');
            });
        }
    </script>

    <script th:src="@{/static/js/const.js}"></script>


    <script>
        new Vue({
            el: '#app',
            data() {
                return {

                    inputText: '',
                    result: '',
                    resultHtml: '',

                    hiddenSearch: false,
                    vload: false,

                    systemTitle: '智能办公系统',
                    dialogVisible: false,

                    menuList: [],

                    activeMenu: '5-10',  // 修改为默认选中首页
                    isCollapse: false,  // 控制菜单折叠状态
                    chartTimeRange: '7',
                    notices: [],
                    todoFilter: 'all',
                    todos: [],

                }
            },
            computed: {
                completedTodos() {
                    return this.todos.filter(todo => todo.done).length;
                }
            },
            methods: {

                searchByFilter() {
                    // 在这里实现搜索逻辑
                    console.log('搜索条件：', this.value2);
                },

                handleClose() {
                    this.$refs.formRef.resetFields();
                    this.dialogVisible = false;
                },
                submitForm() {
                    this.$refs.formRef.validate((valid) => {
                        if (valid) {
                            // TODO: 处理表单提交
                            console.log('表单数据:', this.formData);
                            this.$message.success('提交成功');
                            this.handleClose();
                        } else {
                            return false;
                        }
                    });
                },
                // 切换菜单折叠状态
                toggleCollapse() {
                    this.isCollapse = !this.isCollapse;
                },
                // 添加菜单点击处理方法
                handleSelect(index, indexPath) {
                    this.activeMenu = index;
                    // 根据需要处理路由跳转或其他逻辑
                },

                handleSizeChange(val) {
                    this.pagination.pageSize = val;
                    this.loadTableData();
                },
                handleCurrentChange(val) {
                    this.pagination.currentPage = val;
                    this.loadTableData();
                },
                handleEdit(row) {
                    console.log('编辑', row);
                    // TODO: 实现编辑功能
                },
                handleView(row) {
                    console.log('查看', row);
                    // TODO: 实现查看功能
                },
                handleDelete(row) {
                    this.$confirm('确认删除<span style="color:red;">小区信息</span>吗？', '提示', {
                        dangerouslyUseHTMLString: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // TODO: 实现删除功能
                        this.$message.success('删除成功');
                    }).catch(() => {});
                },
                loadTableData() {
                    axios.get(cst.gateway + cst.module.url + "/open/url/" + "all", {
                        params: {
                            cpage: this.pagination.currentPage,
                            csize: this.pagination.pageSize
                        }
                    })
                        .then((response) => {
                            if (response.data.code === 200) {
                                const info = response.data.data;
                                this.tableData = info.list;
                                this.pagination.total = info.total;
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                },
                showMessages() {
                    // TODO: 显示消息列表
                    this.$message({
                        message: '您有3条未读消息',
                        type: 'info'
                    });
                },
                logOutPage() {
                    window.location.href = '/pc' + '/login';
                },
                clearCompletedTodos() {
                    this.todos = this.todos.filter(todo => !todo.done);
                },
                loadMenus() {
                    axios.get(cst.gateway + cst.module.auth + "/sysinfo/menu/" + "sidebar")
                        .then((response) => {
                            if (response.data.code === 200) {
                                this.menuList = response.data.data;
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                },
                openUrl(dir, item) {
                    window.location.href = "/pc" + "/data" + dir.url+ item.url + "?t=" + new Date().getTime();
                },
                goHomePage() {
                    window.location.href = "/pc"  + "/index";
                },

                sendRequest() {

                    this.vload = true;

                    this.result = '' ;
                    this.resultHtml = marked.parse(this.result);

                    const params = {

                        hello: "abc",
                        url: "https://element.eleme.cn/#/zh-CN/component/icon#tu-biao-ji-he"

                    } ;
                    const eventSource = new EventSource('http://wz:9999/gateway/url/wechat?dict=' + this.inputText + '&t=' + new Date().getTime() );
                    eventSource.onmessage = (event) => {
                        Prism.highlightAll();
                        bombb();
                        // 将 Markdown 转换为 HTML
                        this.$nextTick(() => {
                            try {
                                const hei = JSON.parse(event.data)
                                if (hei && hei.output) {
                                    this.result += hei.output.text;
                                    this.resultHtml = marked.parse(this.result);
                                }
                            } catch(e) {
                                console.log(e);
                            }
                            if (this.result.trim().length > 1) {
                                this.vload = false;
                            }
                            Prism.highlightAll();
                            bombb();

                        })
                    };
                    eventSource.onerror = (error) => {
                        console.log('事件源结束:', error);
                        eventSource.close();
                    };

                }

            },
            mounted() {

                bombb();

// 配置 marked 的代码渲染器，使用 highlight.js 进行代码高亮
                marked.setOptions({
                    renderer: new marked.Renderer(),
                    highlight: function (code, lang) {
                        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
                        return hljs.highlight(code, { language }).value;
                    },
                    langPrefix: 'hljs language-',
                    pedantic: false,
                    gfm: true,
                    breaks: false,
                    sanitize: false,
                    smartLists: true,
                    smartypants: false,
                    xhtml: false
                });
                // 将 Markdown 转换为 HTML
                this.resultHtml = marked.parse(this.result);
            }
        })
    </script>
</body>
</html>

